{extend name='public/base'}
{block name='content'}

    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        {$item['item1']}
        <small>{$item['item2']}</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> {$item['item1']}</a></li>
        <li class="active">{$item['item2']}</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">操作栏</h3>
        </div>
        <div class="panel-body">
                <div>
                        <input  id="title" style="height: 30px;width:150px;font-size: 16px;float: left;" type="text" name="title" required  placeholder="请输入角色名称" lay-verify="required">
                        <button id='add_role'  style="margin-left: 5px;"   class="btn btn-sm btn-small btn-success">新增角色
                        </button>
                        <!-- 如需要批量删除，请去掉下面class的hidden属性 -->
                        <button style="margin-left: 5px;" data-type='getCheckData'  class="hidden demoTable btn btn-danger btn-success">批量删除
                        </button>
                </div>
            <!--   <button class="btn  btn-danger btn-small">删除</button> -->
        </div>
     </div>

    <div class="row "  >
        <div class="col-xs-12">
          <!-- /.box -->
          <div class="box">
            <div class="box-header">
              <h3 class="box-title">列表</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                  <table class="layui-hide" id="test" lay-filter="demo"></table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->

{/block}
{block name='js'}
  <script type="text/javascript">

        layui.config({
          version: '1512984638033' //为了更新 js 缓存，可忽略
        });

        layui.use(['laydate', 'laypage', 'layer', 'table',  'element','form'], function(){
        var laydate = layui.laydate //日期
        ,laypage = layui.laypage //分页
        layer = layui.layer //弹层
        ,table = layui.table //表格
        ,element = layui.element//元素操作
        ,form=layui.form; //表单



      //执行一个 table 实例
      var tableObj = table.render({
        id:'idTest',
        elem: '#test',
        limit:'10',
        size:'',
        skin: 'row ' //行边框风格
        ,height: ''
        ,url: '{:url("admin/adminUser/get_role_list")}' //数据接口
        ,page: true //开启分页
        ,cols: [[ //表头
            //开启复选框
            // {type:'checkbox'},
             {field: 'id', title: 'ID'}
            ,{field: 'title',edit:'text',title: '角色名(点击表格更改)', }
            ,{field: 'status', title: '状态',templet: '#status'}
            ,{ title: '操作',align:'center', toolbar: '#barDemo'}
        ]]
      });
    //监听表格复选框选择
    table.on('checkbox(demo)', function(obj){

    });
    //批量操作监听
    var $ = layui.$, active = {
            getCheckData: function(){ //获取选中数据
              var checkStatus = table.checkStatus('idTest')
              ,data = checkStatus.data;
              // layer.alert(JSON.stringify(data));
            layer.confirm('真的批量删除吗', function(){
                    $.ajax({
                          url: "{:url('admin/admin_user/deleteManyRole')}",
                          type: 'post',
                          dataType: 'json',
                          data: {
                            ids:data
                          },
                    })
                    .done(function(res) {
                        if(res.code==0){
                            layer.msg(res.msg,{icon:2,time:3000},function(){
                                 tableObj.reload();
                            });
                        }else{
                            layer.msg(res.msg,{icon:1,time:3000},function(){
                                    tableObj.reload();
                            });
                        }
                  })
                })
            }
            ,getCheckLength: function(){ //获取选中数目
              var checkStatus = table.checkStatus('idTest')
              ,data = checkStatus.data;
              layer.msg('选中了：'+ data.length + ' 个');
            }
            ,isAll: function(){ //验证是否全选
              var checkStatus = table.checkStatus('idTest');
              layer.msg(checkStatus.isAll ? '全选': '未全选')
            }
    };

    $('.demoTable').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
    });

    //监听工具条
    table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
      var data = obj.data //获得当前行数据
      ,layEvent = obj.event,id = obj.data.id; //获得 lay-event 对应的值
      if(layEvent === 'edit'){
             lotus_show('角色授权','show_edit_role.html?id='+id,400,220,300);
      } else if(layEvent === 'del'){
        layer.confirm('真的删除行么', function(index){
          //向服务端发送删除指令
          $.ajax({
              url: "{:url('admin/admin_user/delete_role')}",
              type: 'get',
              dataType: 'json',
              data: {id: obj.data.id},
          })
          .done(function(res){
              if(res.code==0){
                  layer.msg(res.msg,{icon:2});
              }else{
                  layer.msg(res.msg,{icon:1,time:3000},function(){
                                          tableObj.reload();
                  });
              }
          })

        });
      } else if(layEvent === 'auth'){
           lotus_show('角色授权','auth.html?id='+id,600,650);
      }
    });

    //分页
    laypage.render({
       elem: 'pageDemo' //分页容器的id
      ,count: 100 //总页数
      ,skin: '#1E9FFF' //自定义选中色值
      ,skip: true //开启跳页
      ,jump: function(obj, first){
        if(!first){
          layer.msg('第'+ obj.curr +'页');
        }
      }
    });


    //新增角色
    $('#add_role').on('click', function(){
      var title = $("#title").val();
      $.ajax({
          url: "{:url('admin/admin_user/add_role')}",
          type: 'get',
          dataType: 'json',
          data: {title:title},
      })
      .done(function(data){
          console.log(data);
          if(data.code==0){
                        layer.msg(data.msg,{icon:5,time:500});
                    }else{
                        layer.msg(data.msg,{icon:1,time:500},function(){
                              // location.reload();
                              tableObj.reload();
                              $("#title").val('');
                  })
          }
      })
    });
  });

    //删除角色
    function deleteAuthRule(id){
             layer.confirm('确定要删除吗?',{
                btn: ['确定','取消'] //按钮
              }, function(){
                  $.ajax({
                      url: 'deleteAuthRule',
                      type: 'get',
                      dataType: 'json',
                      data: {id:id},
                  })
                  .done(function(data){
                      console.log(data);
                      if(data.code==0){
                          layer.msg(data.msg,{icon:5,time:500});
                      }else{
                          layer.msg(data.msg,{icon:1,time:500},function(){
                              location.reload();
                          })
                      }
                  })
              });
    }
</script>

<!-- laytpl模板语法 -->
<script type="text/html" id="barDemo">
    <!-- 判断按钮 -->
     {{# if(d.id==1){   }}
         <a  class="btn btn-xs btn-primary   " lay-event="auth">授权</a>
         <a class="btn btn-xs btn-danger  disabled" lay-event="del">删除</a>
     {{#  }else{ }}
            <a class="btn btn-xs btn-primary " lay-event="auth">授权</a>
            <a class="btn btn-xs btn-danger  " lay-event="del">删除</a>
     {{# } }}
</script>
<!-- 状态转换 -->
<script type="text/html" id="status">
 {{# if(d.status==1){   }}
 <button class="layui-btn layui-btn-success layui-btn-xs">启用</button>

 {{#  }else{ }}
       <button class="layui-btn layui-btn-danger layui-btn-xs">禁用</button>
 {{# } }}
</script>
{/block}